<template>
  <div>
    <div class="tab">
      <b>分类</b>
      <el-button class="btn">全部</el-button>
      <el-tabs v-model="activeName" type="card" @tab-click="change">
        <el-tab-pane
          v-for="item in list"
          :key="item.category_id"
          :name="String(item.category_id)"
          :label="item.category_name"
        ></el-tab-pane>
      </el-tabs>
    </div>
    <div class="main">
      <div class="shop">
        <el-row :gutter="10">
          <el-col :span="5" v-for="(item, index) in reslist1" :key="index">
            <div class="grid-content">
              <el-image
                lazy-load
                :src="'http://47.115.85.237:3000/' + item.product_picture"
              />
              <p>{{ item.product_name }}</p>
              <p>{{ item.product_title }}</p>
              <p>
                <span>￥{{ item.product_selling_price}}</span>
                <s>￥{{ item.product_price }}</s>
              </p>
              <p>
                <el-button type="warning" plain @click="add(item)"
                  >加入购物车</el-button
                >
              </p>
            </div>
          </el-col>
        </el-row>
      </div>
        <div class="main">
      <div class="shop">
        <el-row :gutter="10" v-show="show">
          <el-col :span="5" v-for="(item, index) in reslist" :key="index">
            <div class="grid-content">
              <el-image
                lazy-load
                :src="'http://47.115.85.237:3000/' + item.product_picture"
              />
              <p>{{ item.product_name }}</p>
              <p>{{ item.product_title }}</p>
              <p>
                <span>￥{{ item.product_selling_price }}</span>
                <s>￥{{ item.product_price }}</s>
              </p>
              <p>
                <el-button type="warning" plain @click="add(item)"
                  >加入购物车</el-button
                >
              </p>
            </div>
          </el-col>
        </el-row>
      </div>
      </div>
    </div>
       <!-- 分页 -->
    <el-pagination
         v-show="show"
      :current-page="pageNum"
      :page-size="pageSize"
      background
      layout="prev, pager, next"
      :total="list1.length"
      @current-change="change1"
    ></el-pagination>
         <!-- 分页 -->
    <el-pagination
      :current-page="pageNum1"
      :page-size="pageSize1"
      background
      layout="prev, pager, next"
      :total="shop.length"
      @current-change="change2"
    ></el-pagination>
  </div>
</template>
<script>
import { getList, getShop } from "../../untils/api/index";
export default {
  data() {
    return {
      list: [],
      shop: [],
      list1: [],
      activeName: "",
      //分页跳过多少页
      pageNum: 1,
      //  分页的条数
      pageSize: 5,
         //分页跳过多少页
      pageNum1: 1,
      //  分页的条数
      pageSize1: 5,
      show:true
    };
  },
  created() {
    getList().then((res) => {
      this.list = res.data.category;
    });
       getShop().then((res) => {
        this.list1 = res.data.Product;
      });
  },
  methods: {
    change(tab, event) {
      this.show=false
      getShop().then((res) => {
        this.shop = [];
        this.shop = res.data.Product.filter((item) => {
          return item.category_id == tab.name;
        });
      });
    },
    add(item) {
      this.$store.commit("add", item);
      // commit 调用方法 向state中的shoplist传递参数item
    },
    // 分页
    change1(val) {
      this.pageNum = val;
    },   // 分页
    change2(val) {
      this.pageNum1 = val;
    },
  },
  // 分页
  computed: {
    reslist() {
      return this.list1.slice(
        this.pageSize * (this.pageNum - 1),
        this.pageSize * this.pageNum
      );
    },
        reslist1() {
      return this.shop.slice(
        this.pageSize1 * (this.pageNum1 - 1),
        this.pageSize1 * this.pageNum1
      );
    },
  },
};
</script>

<style lang="scss">
.tab {
  width: 100%;
  display: flex;
  height: 45px;
  line-height: 45px;
}
.el-tabs {
  margin-left: 20px;
}
.main {
  .shop {
    width: 1400px;
    background-color: #f5f5f5;
    margin: 20px auto;
    .el-row {
      width: 100%;
    }
    .el-col:hover {
      transition: all 1s;
      box-shadow: 5px 5px 5px #888888;
      transform: scale(1.02);
    }
    .el-col {
      background-color: #fff;
      height: 415px;
      width: 270px;
      margin-bottom: 10px;
      margin-left: 10px;
      .el-button {
        margin-left: 65px;
      }
      .el-image {
        width: 100%;
      }
      p {
        font-size: 14px;
        margin: 0;
        padding: 5px;
      }
      :nth-child(3) {
        color: gray;
      }
      :nth-child(4) {
        span {
          font-size: 16px;
          color: orange;
        }
        s {
          color: gray;
        }
      }
    }
  }
}
.btn {
  margin-left: 16px;
}
</style>
